<script lang="ts" setup generic="T extends BaseEntity">
import { useElementSize } from '@vueuse/core';
import HqRow from '../col/HqRow.vue';
import type { BaseEntity } from '@/index.d';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  total: Number
});

const emit = defineEmits<{
  (e: 'handleQuery'): void;
  (e: 'handleResetQuery'): void;
  (e: 'handleImport'): void;
  (e: 'handleOpenInsert'): void;
}>();

const pageSize = defineModel<number>('pageSize');

const currentPage = defineModel<number>('currentPage');

watch(
  () => [pageSize.value, currentPage.value],
  () => emit('handleQuery')
);

const containerRef = ref(null);
const { height: containerHeight } = useElementSize(containerRef);
const containerHeightToPx = computed<string>(() => containerHeight.value - 2 + 'px');
const tableRef = ref(null);
const { height } = useElementSize(tableRef);
</script>
<template>
  <div ref="containerRef" style="width: 100%; height: 100%">
    <div class="hq-container-table-wraper">
      <!-- 搜索区 -->
      <div class="hq-container-table-search">
        <HqRow class="search"><slot name="search"></slot> </HqRow>
      </div>
      <!-- 搜索区 -->

      <!-- 按钮区 -->
      <div class="hq-container-table-button">
        <!-- 查询按钮 -->
        <el-button icon="Search" color="#626aef" @click="$emit('handleQuery')">
          查询{{ props.title }}
        </el-button>
        <!-- 查询按钮 -->

        <!-- 重置查询按钮 -->
        <el-button icon="Search" color="#5aa19c" @click="$emit('handleResetQuery')">
          重置查询
        </el-button>
        <!-- 重置查询按钮 -->

        <!-- 新增按钮 -->
        <el-button icon="Plus" type="success" @click="emit('handleOpenInsert')">
          新增{{ title }}
        </el-button>
        <!-- 新增按钮 -->

        <slot name="button"></slot>
      </div>
      <!-- 按钮区 -->

      <!-- 表格区 -->
      <div class="hq-container-table-table" ref="tableRef">
        <slot name="table" :height> </slot>
      </div>
      <!-- 表格区 -->

      <!-- 分页区 -->
      <div class="hq-container-table-pagination">
        <slot name="pagination">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total
            :page-sizes="[20, 40, 50, 100, 200]"
            v-model:page-size="pageSize"
            v-model:current-page="currentPage"
          />
        </slot>
      </div>
      <!-- 分页区 -->
    </div>
  </div>
</template>
<style lang="scss" scoped>
// height: calc(100vh - 120px);
.hq-container-table-wraper {
  height: v-bind('containerHeightToPx');
  display: flex;
  flex-direction: column;

  .hq-container-table-search {
    padding: 0 4px;
    .search {
      margin: 2px 0;
      :deep(> .el-col) {
        > * {
          margin: 2px 0;
        }
      }
    }
  }

  .hq-container-table-button {
    height: 40px;
    line-height: 40px;
    display: flex;
    & > * {
      margin: 4px;
    }
  }

  .hq-container-table-table {
    flex: 1;
  }

  .hq-container-table-pagination {
    height: 40px;
    line-height: 40px;
  }
}
</style>
